

<script lang="ts" setup>
import { filterDate } from '@/utils/format'
const props = defineProps({
  recordData: Object,
});
</script>

<template>
  <el-timeline>
    <el-timeline-item :timestamp="filterDate(item.createdAt)" placement="top" v-for="(item, index) in props.recordData"
      class="mb-20">
      <el-card class="card-item">
        <h4 v-if="item.status == 0" class="theme-blue">发起申请</h4>
        <h4 v-if="item.status == 1" class="theme-success">已同意</h4>
        <h4 v-if="item.status == 2" class="theme-error">已驳回</h4>
        <h4 v-if="item.status == 3" class="theme-blue">领取物资</h4>
        <h4 v-if="item.status == 4" class="theme-warn">归还待审批</h4>
        <h4 v-if="item.status == 5" class="theme-success">同意归还</h4>
        <h4 v-if="item.status == 6" class="theme-error">驳回归还申请</h4>
        <div v-if="item.status == 0">
          <p>申请人：{{ item.User.name }}</p>
          <p v-if="item.remark">申请理由：{{ item.remark }}</p>
        </div>
        <div v-if="item.status == 1 || item.status == 2 || item.status == 5">
          <p>审批人：{{ item.User.name }}</p>
          <p>审批备注：{{ item.remark || '--' }}</p>
        </div>
        <div v-if="item.status == 3 || item.status == 4">
          <p>操作人：{{ item.User.name }}</p>
        </div>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<style lang="scss" scoped>
.card-item {
  h4 {
    margin-bottom: 10px;
  }

  p {
    padding: 3px 8px;
  }
}
</style>
